﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> </title>
    <link href="bower_components/layer/skin/layer.css" rel="stylesheet" />

    <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
    <link href="styles/auto.css" rel="stylesheet" >
    <!--<script src="/bower_components/modernizr/modernizr.js"></script>-->
    <style>
        /*#wrap,#wrap1{overflow: auto; width:500px;height: 500px;margin: 5px; float:left;}
        .a,.b{position: absolute; left:0;top:0;width:80px;height: 80px; }
        .a{background-color: red;}
        .b{background-color: green;}*/
     
      
        
      
           </style>
</head>

<body>
    <input type="text" id=txtNy value="2015-02-06" />
    <input class="num" value=100 />
 
    <div >
        <div id="wrap">
            <table id=t1 ></table>
        </div>
        <div id="wrap1">
            <table id=t2></table>
        </div>
    </div>
 
        <div id=a></div>
 

    <!--<input type="text" id="n" value="2001" />
    <input type="text" id="ny" value="201412" /> 不能设置日期，一旦设置，则默认选择为当月，肯定还是解析不对.1717行的位置。估计
    <input type="text" id="nyr" value="2014-12-05" />-->
    <!--<script src="scripts/MingGe_1.6.js"></script>-->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!--<script src="bower_components/underscore/underscore.js"></script>-->
    <script src="bower_components/lodash/lodash.js"></script>
    <script src="bower_components/layer/layer.js"></script>

    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>  <!-- fixed file-->
    <script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="dist/auto.js"></script>

    <script>
        $("#txtNy").datebox("nyr");
         function doit(n){
                   var d=[];
                    for(var i=1;i<n;i++)
                        d.push({
                            name:"shen",
                            sex:i%3==0?"男":'女',
                            age:i,
                            address:"address"+(i*i)
                        })
                        
                    var t=new Date();
                    $("#t1").autoTable({
                        data:d,
                       header:[
                            [
                            {title:"姓名|name",span:[1,1]},
                            {title:"性别|sex",span:[1,1]},
                            {title:"年龄|age",span:[1,1]},
                            {title:"地址",span:[2,1]}
                        ]] ,
                        headerFields:["name","sex","age","address"],
                        
                         header2:[
                            [
                            {title:"姓名|name",span:[1,1]},
                            {title:"性别|sex",span:[1,1]},
                            {title:"年龄|age",span:[1,1]},
                            {title:"地址",span:[2,1]}
                        ]] ,
                        header2Fields:["name","sex","age","address"],
                        
                        mergeFields:["name"],
                        sortFields:["age","name"],
                        editUrl: 'aaa.ashx',            
                        editTable: 'tttt',           
                        editKeyFields: ["name"],        
                        editFields: ["age","address"],
                        isScrollable:true,
                        freezeContainer:'#wrap',
                        freezeFields:["name"],
                        keydataOnRow:["name","sex"],
                        tooltipOnRow:function(row){return row.name;},
                        isPageable:true,
                        isSelectable:true  ,
                        isSaveable:true,
                        columnsWidths:[100,100,100,100]
                    });
                   /* $("#t2").autoTable({
                        data:d,
                       header:[
                            [
                            {title:"姓名|name",span:[1,1]},
                            {title:"性别|sex",span:[1,1]},
                            {title:"年龄|age",span:[1,1]},
                            {title:"地址",span:[2,1]}
                        ]] ,
                        sortFields:["age"],
                        editUrl: 'aaa.ashx',            
                        editTable: 'tttt',           
                        editKeyFields: ["name"],        
                        editFields: ["age","address"],
                        isScrollable:true,
                        freezeContainer:'#wrap1',
                        freezeFields:["name"],
                        keydataOnRow:["name","sex"],
                        tooltipOnRow:function(row){return row.name;},
                        isPageable:true,
                        isSelectable:true  ,
                        columnsWidths:[150,150,150,150],
                        initClass: "table table-striped table-condensed table-hover"
                    });*/
                    console.log('渲染'+n+'行，需要'+(new Date().valueOf()-t.valueOf())/1000)
        }
         $(document).dblclick(function(){
           doit( parseInt( $(".num").val()));
           
        })
    //    $("#a").tabpanel();
    //    $("#a").tabpanel("add",{
    //             id:"shen",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
    //          $("#a").tabpanel("add",{
    //             id:"shen1",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
    //           $("#a").tabpanel("add",{
    //             id:"shen11",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
    //           $("#a").tabpanel("add",{
    //             id:"shen1111",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
    //           $("#a").tabpanel("add",{
    //             id:"shen12",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
    //           $("#a").tabpanel("add",{
    //             id:"shen122",
    //             title:"titileshen",
    //             url:"2.html"
    //         })
            //   $("#a").tabpanel("add",{
            //     id:"shen1333",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen13",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen133",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen1444",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen14",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen15",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen155",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen1566",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen112",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            //   $("#a").tabpanel("add",{
            //     id:"shen11212",
            //     title:"titileshen",
            //     url:"2.html"
            // })
            
    </script>
</body>

</html>


